html {
  --el-hover-bg-color: #efefef;

  .el-dialog {
    --el-dialog-padding-primary: 10px;
  }
}

html.dark {
  --el-hover-bg-color: #262727;
  --ck-color-text: #fff;
  --ck-style-panel-button-hover-label-background: #262727;
  --ck-color-base-background: var(--el-bg-color);

  .v-tags-view__item {
    .v-tags-view__item--close {
      span {
        color: var(--el-color-white) !important;
      }
    }
  }
  .vxe-table {
    .vxe-table--header {
      color: var(--el-color-white);
      background-color: var(--el-bg-color);
      .vxe-header--column {
        background-image: linear-gradient(#363637, #363637), linear-gradient(#363637, #363637);
      }
    }
    .vxe-table--body {
      color: var(--el-color-white);
      background-color: var(--el-bg-color);

      .vxe-body--row.row--stripe {
        color: var(--el-color-white);
        background-color: var(--el-bg-color);
      }
      .vxe-body--row.row--hover {
        background-color: var(--el-hover-bg-color);
      }
      .vxe-body--column {
        background-image: linear-gradient(#363637, #363637), linear-gradient(#363637, #363637);
      }
    }
    .vxe-table--body-wrapper,
    .vxe-table--footer-wrapper {
      background-color: var(--el-bg-color);
    }
    .vxe-table--render-default,
    .vxe-table--header-border-line,
    .vxe-table--border-line {
      border-color: var(--el-table-border-color);
      z-index: 1;
    }
  }
  .vxe-select {
    .vxe-input--inner {
      color: var(--el-color-white);
      background-color: var(--el-bg-color);
    }
  }
  .vxe-select-option--wrapper {
    color: var(--el-color-white);
    background-color: var(--el-bg-color);
    .vxe-select-option {
      color: var(--el-color-white);
      background-color: var(--el-bg-color);
      &.is--hover {
        background-color: var(--el-hover-bg-color);
      }
      &.is--selected {
        color: var(--el-color-primary);
      }
    }
  }
}
